<template>
  <div>
    <div v-show="!showRegisters">
      <el-form ref="loginForm" :model="form" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入手机号" @keyup.enter.native="onClickConfirm" style="width: 244px;" clearable></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
          <el-input v-model="form.pwd" placeholder="请输入密码" @keyup.enter.native="onClickConfirm" type="password" style="width: 244px;" clearable></el-input>
          <el-button style="color: var(--primaryColor); border: none;" @click="showForgotPassword = true">忘记密码？</el-button>
        </el-form-item>
        <el-form-item>
          <el-button class="submit" :loading="submitLoading" type="primary" @click="onClickConfirm">登录</el-button>
          <p @click="showRegisters = true" class="registers">首次登录请先完成账户注册>>></p>
        </el-form-item>
      </el-form>
    </div>
    <!-- 前往注册 -->
    <TeacherSignIn v-show="showRegisters"></TeacherSignIn>
    <TeacherForgotPassword title="找回密码"
      ref="forgotPassword"
      :dialog-visible.sync="showForgotPassword"
    />
  </div>
</template>
<script>
import { request } from "@/util/request.js"
import TeacherSignIn from "./TeacherSignIn"
import TeacherForgotPassword from "./TeacherForgotPassword"
export default {
  name: 'TeacherLogin',
  inheritAttrs: false,
  components: { TeacherSignIn, TeacherForgotPassword },
  inject: ['reload'],
  data() {
    return {
      showForgotPassword: false,
      showRegisters: false, // 注册页
      submitLoading: false,
      form: {
        phone: undefined,
        pwd: undefined,
      },

      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'change' },
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'change' },
        ],
      },
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onClickConfirm() {
      this.$refs['loginForm'].validate(valid => {
        if (!valid) return
        this.submitLoading = true
        request({
					method: 'POST',
					url: 'sysUser/expertLogin',
					params: this.form
				}).then(res => {
          console.log(res);
          if (![0, 200].includes(res.code)) {
            return this.$message.error(res.msg)
          }
          this.$message.success({
            showClose: true,
            message: '登录成功！',
            duration: 2000
          });
          this.reload();
          sessionStorage.setItem(res.data.tokenInfo.tokenName, res.data.tokenInfo.tokenValue)
          sessionStorage.setItem('userId', res.data.user.userId)
          sessionStorage.setItem('user', JSON.stringify(res.data.user))
          this.$store.dispatch('login', res.data)
          this.$router.push({ name: 'Home' });
        }).finally(() => {
          this.submitLoading = false
        })
      })
    },

  }
}

</script>
<style lang="stylus" scoped>
.submit
  width: 244px;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
.registers
  margin-top 29px
  font-size: 18px;
  font-weight: 400;
  color: #FC6621;
  line-height: 36px;
</style>
